<template>
  <div class="count_list">
    <div class="count_item">
      <div class="count_item_title">
        <a-icon type="carry-out" style="color: #52bad3;" theme="filled" />
        <div class="count_item_text">全部</div>
      </div>
      <div class="count_item_num">{{allCount}}</div>
      <div class="active" v-if="current === 1"></div>
    </div>
    <div class="count_item">
      <div class="count_item_title">
        <a-icon type="check-circle" style="color: #4c84ff;" theme="filled" />
        <div class="count_item_text">运行中</div>
      </div>
      <div class="count_item_num">{{runCount}}</div>
      <div class="active" v-if="current === 2"></div>
    </div>
    <div class="count_item">
      <div class="count_item_title">
        <a-icon type="pause-circle" theme="filled" style="color: #ffb64c;" />
        <div class="count_item_text">暂停中</div>
      </div>
      <div class="count_item_num">{{pauseCount}}</div>
      <div class="active" v-if="current === 2"></div>
    </div>
    <div class="count_item">
      <div class="count_item_title">
        <a-icon type="hourglass" theme="filled" style="color: #15c96d;" />
      <div class="count_item_text">待审批</div>
      </div>
      <div class="count_item_num">{{waitCount}}</div>
      <div class="active" v-if="current === 2"></div>
    </div>
    <div class="count_item">
      <div class="count_item_title">
        <a-icon type="minus-circle" style="color: #8492a6;" theme="filled" />
        <div class="count_item_text">已结束</div>
      </div>
      <div class="count_item_num">{{endCount}}</div>
      <div class="active" v-if="current === 2"></div>
    </div>
    <div class="count_item">
      <div class="count_item_title">
        <a-icon type="file-text" style="color: #52bad3;" />
        <div class="count_item_text">草稿箱</div>
      </div>
      <div class="count_item_num">{{draftCount}}</div>
      <div class="active" v-if="current === 2"></div>
    </div>
  </div>
</template>

<script>
import { mapActions, mapMutations, mapState } from 'vuex';
import { baseMixin } from '@/store/app-mixin';

export default {
    name: 'CountPlan',
    mixins: [baseMixin],
    data () {
      return {
        current: 1,
        allCount: 0,
        runCount: 0,
        pauseCount: 0,
        waitCount: 0,
        endCount: 0,
        draftCount: 0,
        projectId: 'e72764f90b0f4b008a8635ae195aa0e0'
      }
    },
    mounted () {
      this.init();
    },
    methods: {
      ...mapActions('planManage', ['getAllPlanList']),
      init () {
        const queryParams = {
          projectId: this.projectId
        };
        this.getAllPlanList({ ...queryParams }).then(res => {
          this.allCount = res.data.total;
        });

        this.getAllPlanList({ ...queryParams }).then(res => {
          this.allCount = res.data.total;
        });

        this.getAllPlanList({ ...queryParams }).then(res => {
          this.allCount = res.data.total;
        });

        this.getAllPlanList({ ...queryParams }).then(res => {
          this.allCount = res.data.total;
        });

        this.getAllPlanList({ ...queryParams }).then(res => {
          this.allCount = res.data.total;
        });

        this.getAllPlanList({ ...queryParams }).then(res => {
          this.allCount = res.data.total;
        });
      },
    }
  }
</script>

<style scoped>
.count_list {
  display: flex;
  margin-top: 20px;
}

.count_item {
  width: 165px;
  position: relative;
  padding-left: 20px;
  cursor: pointer;
}

.count_item_title {
  display: flex;
  margin-top: 20px;
  align-items: center;
}

.count_item_title .anticon {
  margin-right: 6px;
}

.count_item_num {
  font-size: 36px;
  line-height: 54px;
  font-weight: 500;
  color: #475669;
}

.active {
  position: absolute;
  left: 0;
  width: 100%;
  height: 4px;
  top: 0;
  background-color: #00BF8A;
}
</style>